<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解决插值表达式闪烁问题</title>
</head>
<style>
    /* 
    方案一：
        step1：声明属性选择器[ng-cloak]{display: none;}
    */
    [ng-cloak]{
        display: none;
    }
</style>
<body ng-app='app'>
    <div ng-controller="demoCtrl">
        <ul>
            <!-- 方案一：step2:给标签添加ng-cloak属性 -->
            <li ng-cloak ng-repeat="item in list">
                {{$index}}--{{item.creator}}--{{item.company}}
            </li>


            <!-- 方案二： -->
            <!-- $index为数组索引 -->
            <!-- <li ng-bind="$index+'=='+item.creator+'=='+item.company" ng-repeat="item in list track by $index">
            </li> -->
        </ul>
    </div>
</body>
<script src="./libs/js/angular-1.6.9.min.js"></script>
<script>
    // app为模块名称，[]为依赖项，此处暂时不需要添加任何依赖
    var app=angular.module('app',[]);
    app.controller('demoCtrl',['$scope',function($scope){
         $scope.list=[
             {
                 creator:'jack',
                 company:'阿里巴巴'
             },{
                creator:'pony',
                 company:'腾讯科技'
             },
             {
                creator:'robin',
                company:'百度网讯'
             }
         ];   
    }]);
</script>
</html>